import Vue from "vue";

// 全局自定义指令
// customShow：自定义指令名
// 自定义指令的钩子函数
// bind：只调用一次，指令第一次绑定到元素时调用   在这里可以进行一次性的初始化设置
// inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
// update：所在组件的 VNode 更新时调用
// componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
// unbind：只调用一次，指令与元素解绑时调用


// 钩子函数参数
// el：指令所绑定的元素，可以用来直接操作 DOM。
// binding：一个对象，包含以下 property：
// name：指令名，不包括 v- 前缀
// value：指令的绑定值
// oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用
Vue.directive("customShow",{
    inserted:function(el,binding){
        if(binding.value){
            // visibility 属性规定元素是否可见（即使不可见的元素也会占据页面上的空间）
            // 默认值：	visible 这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见
            // hidden：元素是不可见的
            el.style.visibility = "visible";
        }else{
            el.style.visibility = "hidden";
        }
    },
    update:function(el,binding){
        if(binding.value){
            el.style.visibility = "visible";
        }else{
            el.style.visibility = "hidden";
        }
    }
})
